<style>
    body {
        font-size: 14px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    ul, li {
        list-style: none;
    }


    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;

    }


    #content {

    }

    #content #desc, #content #dict {
        position: absolute;
        top: 80px;
        bottom: 20px;;
        left: 20px;;
        right: 20px;;
    }

    #editor-content {
        max-height: 1000px;
        min-height: 500px;
        width: 100%;
        box-sizing: border-box;
    }

    #list .item {
        line-height: 40px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    #list .child-item {
        line-height: 40px;
        background: #f3f3f3;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 20px;
    }

    #list .child-item:hover {
        background: #e3e3e3;
        cursor: pointer;
    }

    #list .title {
        font-weight: bold;
        font-size: 15px;
    }

    #list li {
        box-sizing: border-box;
    }

    #list .handler {
        margin-left: 30px;
        display: none;
    }

    #list .handler i {
        margin-left: 5px;
    }

    #btn-save {
        position: absolute;
        top: 40px;
        right: 30px;
    }

    .handler-show {
        display: inline-block;
    }

    .custom-dialog {
        display: none;
        padding-right: 20px;
        box-sizing: border-box;
        padding-top: 20px;
    }

    .test {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #container .top {
        background: white;
        box-sizing: border-box;
    }

    .play {
        height: 700px;
        min-width: 500px;
        max-width: 1280px;
        background: black;
        margin: 0 auto;
    }

    .play .video {
        height: 600px;
        width: 80%;
        float: left;
        background: url("../../../res/images/index-header.jpg");
        background-size: 100px 200px;
        position: relative;
    }

    .play .dir {
        height: 600px;
        width: 20%;
        float: left;
    }

    .play .tag {
        background: #2E2D3C;
        box-sizing: border-box;
        padding: 10px;
        clear: left;
        height: 100px;
        width: 100%;
    }

    .play .video .btn {
        width: 80px;
        height: 80px;
        background: #00a2d4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%)
    }

    .play .tag .big-title {
        font-size: 25px;
        color: white;
    }

    .play .tag .small-title {
        margin-top: 10px;
        font-size: 16px;
        color: #cecece;
    }

    .dir {
        font-size: 14px;
        overflow-y: auto;
    }

    .dir .list li.item {
        color: #cecece;
        box-sizing: border-box;
        margin: 10px 10px;
        min-height: 50px;
        border-bottom: 1px solid #3F3F3F;
    }

    .dir .status-gray {
        background: grey;
        font-size: 12px;
        color: black;
        padding: 0 5px;
    }

    .dir .status-select {
        background: #00a2d4;
        font-size: 12px;
        padding: 0 5px;
        color: black;
    }

    .dir .list p.title {
        line-height: 20px;
        font-size: 16px;
    }

    .dir .list p.link {
        padding: 15px 0;

    }

    .dir .list a {
        color: #cecece;
        padding-left: 5px;
    }

    .dir .list a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    .dir .list a .time {
        color: grey;
        font-size: 12px;
        margin-left: 35px;
    }

    .video .icon {
        width: 0;
        height: 0;
        border: 15px solid;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-15%, -50%);
        border-color: transparent transparent transparent white;
    }

    #container .bottom {
        position: absolute;
        top: 700px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #container .bottom .content {

        min-width: 500px;
        max-width: 1280px;
        min-height: 500px;
        background: white;
        margin: 20px auto;
    }

    .tab a {
        line-height: 50px;
        width: 150px;
        display: inline-block;
        text-align: center;

    }

    a {
        color: black;
    }

    .tab a:hover {
        color: #00a2d4;
    }

    .tab-selected {
        border-bottom: 3px solid #00a2d4;
        color: #00a2d4;
    }

    #container #desc, #container #dict {
        box-sizing: border-box;
        padding: 20px;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="top">
        <div class="play">
            <div class="video">
                <div class="btn">
                    <div class="icon"></div>
                </div>
            </div>
            <div class="dir">
                <ul class="list" id="play-list">
                    <li class="item">
                        <p class="title">平面设计系列课程</p>
                        <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span
                                class="time">37分钟</span></a></p>
                        <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>
                        </p>
                    </li>
                    <li class="item">
                        <p class="title">平面设计系列课程</p>
                        <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span
                                class="time">37分钟</span></a></p>
                        <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>
                        </p>
                    </li>
                    <li class="item">
                        <p class="title">平面设计系列课程</p>
                        <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span
                                class="time">37分钟</span></a></p>
                        <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>
                        </p>
                    </li>
                    <li class="item">
                        <p class="title">平面设计系列课程</p>
                        <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span
                                class="time">37分钟</span></a></p>
                        <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>
                        </p>
                    </li>
                    <li class="item">
                        <p class="title">平面设计系列课程</p>
                        <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span
                                class="time">37分钟</span></a></p>
                        <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="tag">
                <p class="big-title">平面设计系列课程</p>
                <p class="small-title"><span>最近在学1000人</span></p>
            </div>
        </div>
    </div>
    <div id="dir" class="bottom">
        <div class="content">
            <div class="tab">
                <a class="tab-selected" id="tab1">课程概述</a>
                <a id="tab2">目录</a>
            </div>

            <div id="desc">
                <img src="./res/images/detail.jpg" style="width: 100%;height: auto">
            </div>

            <div id="dict" style="display: none">
                <ul id="list">
                </ul>
            </div>
        </div>
    </div>
</div>

<!--添加对话框-->
<div class="custom-dialog" id="add-dialog">
    <input type="hidden" id="parentId">
    <div id="add_form" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">章节名称</label>
            <div class="layui-input-block">
                <input type="text" id="title" lay-verify="required" placeholder="请输入内容" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">章节状态</label>
            <div class="layui-input-block">
                <select id="status" lay-filter="status" name="course_state" value="0">
                    <option value="0">未直播</option>
                    <option value="1">直播中</option>
                    <option value="2">录播</option>
                    <option value="3">其他资源</option>
                </select>
            </div>
        </div>
        <!--视频相关-->
        <div class="layui-form-item" id="layout-rtmp">
            <label class="layui-form-label">推流地址</label>
            <div class="layui-input-block">
                <input type="text" id="rtmp" lay-verify="required" placeholder="请输入推流rtmp地址" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="layout-upload">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
                <div class="layui-progress" lay-showPercent="true" style="margin:5px 0" lay-filter="progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                </div>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload-file">多选</button>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">章节难度</label>
            <div class="layui-input-block">
                <select id="easy" lay-filter="easy" name="ease">
                    <option value="0">初级</option>
                    <option value="1">中级</option>
                    <option value="2">高级</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" name="startTime" id="startDate" lay-verify="datetime" placeholder="请选择课程开始时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" id="endingDate" lay-verify="datetime" placeholder="请选择课程结束时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>
</div>

<script>
    // var parentId = window.util.getUrlParam('id');
    var parentId = 15;
    var parentInfo;
    layui.use(['layer', 'upload', 'form', 'laydate', 'element'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var layData = layui.laydate;
        var element = layui.element;
        //监听课程状态选择
        form.on('switch(status)', function (data) {

        });
        //开始日期
        // layData.render({
        //     elem: '#startDate'
        //     , type: 'datetime'
        // });
        //结束日期
        // layData.render({
        //     elem: '#endingDate'
        //     , type: 'datetime'
        // });
        upload.render({
            elem: '#upload-file'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , accept: 'file'
            , size: 1024 * 2
            , multiple: true

            , allDone: function (obj) { //当文件全部被提交后，才触发
                element.progress('progress', (obj.successful / obj.total * 100) + '%');
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
            }
            , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

            }
        });
        loadCourseData();
        loadDirData();
    });
    // tab点击事件
    $(".tab").find('a').click(function () {
        $(".tab").find('a').removeClass('tab-selected');
        $(this).addClass('tab-selected');
        var id = $(this).prop('id');
        var descDiv = $('#desc');
        var dictDiv = $('#dict');
        descDiv.hide();
        dictDiv.hide();
        switch (id) {
            case 'tab1':
                descDiv.show();
                break;
            case 'tab2':
                dictDiv.show();
                break;
        }
    });

    // 新建目录
    $('#btn-new-dir').click(function () {
        showDialog(parentId);
    });
    // 显示隐藏操作
    var list = $('#list');
    list.find('li').mouseenter(function () {
        $(this).find('span.handler').show();
    });
    list.find('li').mouseleave(function () {
        $(this).find('span.handler').hide();
    });
    // 添加
    list.find('.desc.html').click(function () {
        console.log('aaa');
    });
    // 编辑
    list.find('.edit').click(function () {
        console.log('aaa');
    });
    // 删除
    list.find('.del').click(function () {
        console.log('aaa');
    });
    var ue = UE.getEditor('editor-content');
    //监听浏览器宽度的改变
    window.onresize = function () {
        ue.setHeight($('#editor-content').height());
    };


    function showDialog(parentId) {
        layer.open({
            type: 1,
            area: ['500px', '350px'],
            btn: ['添加', '取消'],
            title: '添加新章节',
            content: $('#add-dialog'),
            yes: function (index) {
                var title = $('#title');
                var status = $('#status');
                var startTime = $('#startDate');
                var endTime = $('#endingDate');
                var easy = $('#easy');
                if (window.util.isEmpty(title.val())) {
                    title.focus();
                    layer.msg("标题不能为空")
                    return;
                }
                if (window.util.isEmpty(startTime.val())) {
                    startTime.focus();
                    layer.msg("选择开始时间")
                    return;
                }
                if (window.util.isEmpty(endTime.val())) {
                    endTime.focus();
                    layer.msg("选择结束时间")
                    return;
                }
                var data = {
                    parent_id: parentId,
                    major_id: parentInfo.major_id,
                    course_subject: parentInfo.course_subject,
                    course_teacher_id: parentInfo.course_teacher_id,
                    course_task: title.val(),
                    course_state: status.val(),
                    startTime: startTime.val(),
                    endTime: endTime.val(),
                    ease: easy.val()
                };
                layer.close(index);
                createNewItem(data);
            }
        });
    }

    //加载课程信息
    function loadCourseData() {
        $.ajax({
            url: context + '/api/educourse/getOne?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    parentInfo = result.data;
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //加载目录
    function loadDirData() {
        $.ajax({
            url: context + '/api/educourse/getTask?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    var list = $('#list');
                    list.empty();
                    for (var i = 0; i < data.length; i++) {
                        var li = '    <li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
                            '                        class="handler">\n' +
                            '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
                            '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
                            '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
                            '                    </span>\n' +
                            '                </li>';
                        list.append(li);
                    }
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //新建目录
    function createNewItem(data) {
        $.ajax({
            url: context + '/api/educourse/insertOne',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json;charset-UTF-8",
            data: JSON.stringify(data),
            success: function (result) {
                if (result.success) {
                    loadDirData();

                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("添加失败");
            }
        });
    }
</script>
